import React, { Component } from "react";
// 此组件是实现租房小组布局的，使用了antd-mobile中的Grid组件
import { Grid, Flex } from "antd-mobile";
import { BASE_URL } from "../../utils/url";
import { get_Group_Data } from "../../utils/http_biz";

class Group extends Component {
  state = {
    data: [],
  };

  // 在组件的生命周期方法中发出ajax请求
  async componentDidMount() {
    //   1.0 获取租房小组数据，同时将数据结构到body对象
    let { body } = await get_Group_Data();
    //   2.0 更新状态属性 data的值
    this.setState({ data: body });
    /*
      data数组中的对象格式：
       {
      "id": 1,
      "title": "家住回龙观",
      "desc": "归属的感觉",
      "imgSrc": "/img/groups/1.png"
    },
    */
  }

  render() {
    return (
      <div>
        <Grid
          data={this.state.data} // 宫格的数据源
          columnNum={2} // 控制显示列数
          itemStyle={{ maxHeight: "86px" }} // 这里如果使用height设置不了宫格的高度
          // renderItem：表示渲染的宫格结构和样式
          renderItem={(dataItem) => (
            <div className="grid-item">
              <Flex justify="around">
                <div>
                  <h3>{dataItem.title}</h3>
                  <p>{dataItem.desc}</p>
                </div>
                <div>
                  <img src={BASE_URL + dataItem.imgSrc} alt="" />
                </div>
              </Flex>
            </div>
          )}
        />
      </div>
    );
  }
}

export default Group;
